<template>
        <el-dialog title="流程模板" :visible.sync="dialogVisible" width="50%" top="0" :destroy-on-close="true">
            <el-form :model="form" ref="form" label-width="100px" :loading="formLoading">
                <el-form-item label="模板名称">
                    <el-input v-model="form.name" placeholder="请输入模板名称"></el-input>
                </el-form-item>

                <el-form-item label="流程类型">
                    <sgSelect v-model="form.type" typeCode="WorkFlowType"></sgSelect>
                </el-form-item>

                <el-form-item label="流程等级">
                    <sgSelect v-model="form.level" typeCode="WorkFlowLevel"></sgSelect>
                </el-form-item>

                <el-form-item label="所有人可发起">
                    <el-radio v-model="form.anyOneCanStart" label="true">是</el-radio>
                    <el-radio v-model="form.anyOneCanStart" label="false">否</el-radio>
                </el-form-item>

                <el-card shadow="always" :body-style="{ padding: '20px' }" v-if="form.anyOneCanStart == 'false'">
                    <div slot="header">
                        <span>可发起人</span>
                    </div>
                    <el-form-item label="职位选择">
                        <el-cascader v-model="form.startFlowJob" :options="selectOptions.job" class="select100"  :loading="selectLoad.job" 
                            :props="{ multiple: true, checkStrictly: true, value: 'id', label: 'name',emitPath:false }"></el-cascader>
                    </el-form-item>

                    <el-form-item label="人员选择">
                        <el-select v-model="form.startFlowUser" multiple placeholder="请选择" class="select100"
                            :loading="selectLoad.user">
                            <el-option v-for="item in selectOptions.user" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="部门选择">
                        <el-cascader v-model="form.startFlowDepartment" :options="selectOptions.department" class="select100"
                        :loading="selectLoad.department" :props="{ multiple: true, checkStrictly: true, value: 'id', label: 'name',emitPath:false }"></el-cascader>
                    </el-form-item>
                </el-card>

                <el-form-item label="是否启用" size="normal">
                    <el-tooltip class="item" effect="dark" content="请完成流程设计再启用" placement="top-start"
                        :disabled="form.isDesign">
                        <el-radio v-model="form.status" label="true" :disabled="!form.isDesign">启用</el-radio>
                    </el-tooltip>

                    <el-radio v-model="form.status" label="false">禁用</el-radio>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" :rows="2" v-model="form.remark" placeholder="请输入备注" :maxlength="100"
                        :show-word-limit="true" :autosize="{ minRows: 2 }">
                    </el-input>

                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="dialogVisible= false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
</template>

<script>
import sgSelect from "@/components/dicSelectSingle.vue";
import { getSelect as getUserSelect } from "@/api/user/user";
import { getSelect as getDepartmentSelect } from "@/api/user/department";
import { getSelect as getJobSelect } from "@/api/user/job";
import { insertItem } from "@/api/workFlowTemplate/workFlowTemplate";
import { getTemplateForm } from "@/api/workFlowTemplate/workFlowTemplate";

export default {
    components: {
        sgSelect
    },
    props:{
        value:Boolean,
        workFlowId:String,
    },
    created() {
        this.loadData()
        this.loadUserSelect()
        this.loadDepartmentSelect()
        this.loadJobSelect()
    },
    data() {
        return {
            dialogVisible: this.value,
            pri_workFlowId:this.workFlowId,
            form: {
                id: '',
                name: '',
                type: '',
                remark: '',
                level: '',
                status: 'false',
                startFlowJob: [],
                startFlowUser: [],
                startFlowDepartment: [],
                isDesigned: false,
                anyOneCanStart: 'false',
            },
            formLoading:false,
            options: [{
                value: 'shejiyuanze',
                label: '设计原则',
            }],
            jobSelect: false,
            userSelect: false,
            departmentSelect: false,
            selectOptions: {
                user: [],
                department: [],
                job: []
            },
            selectLoad: {
                user: false,
                department: false,
                job: false
            }
        }
    },
    watch: {
        dialogVisible(val){
            this.$emit('input',val)
        },
        value(val){
            this.dialogVisible = val
        }
    },
    methods: {
        async loadData(){
            if (this.pri_workFlowId) {
                let res = await getTemplateForm(this.pri_workFlowId)
                if(res.code == 10000){
                    this.form = res.data
                }
            }
            
        },
        async onSubmit() {
            this.formLoading = true;
            let res = await insertItem(this.form)
            this.formLoading = false;
            if (res.code==10000) {
                this.$message({
                    type:'success',
                    message:"操作成功"
                })
                this.dialogVisible = false
                this.$emit('closed')
            }
            else{
                this.$message(res.msg)
            }
            
        },
        async loadUserSelect() {
            this.selectLoad.user = true;
            let res = await getUserSelect()
            if (res.code == 10000) {
                this.selectOptions.user = res.data
            }
            this.selectLoad.user = false;
        },
        async loadJobSelect() {
            this.selectLoad.job = true;
            let res = await getJobSelect()
            if (res.code == 10000) {
                var res2 = this.getChildrenSelect(res.data);
                this.selectOptions.job = res2
            }
            this.selectLoad.job = false;
        },
        async loadDepartmentSelect() {
            this.selectLoad.department = true;
            let res = await getDepartmentSelect()
            if (res.code == 10000) {
                var res2 = this.getChildrenSelect(res.data);
                this.selectOptions.department = res2
            }
            this.selectLoad.department = false;
        },
        getChildrenSelect(list) {
            var result = {}
            this.createArr(result,list,"");   
            return result.children;
        },
        createArr(data, arr, id) {
            const filtersList = arr.filter(e => e.parentCode==id);
            data.children = filtersList;
            data.children = data.children.map(e => {
                e = this.createArr(e, arr, e.id);

                if (e.children.length > 0) {
                    return e;
                } else {
                    delete e.children
                    return e
                }

            });
            return data;
        }

    }
}
</script>

<style scoped></style>